<template>
  <div class='page-scan-mana'>
    <el-form :inline='true' :model='dataQueryForm' ref='dataQueryForm'>
      <div class='pc-page-header'>
        <el-form-item prop='id'>
          <el-input
            v-model='dataQueryForm.topicNo'
            clearable
            class='pc-input3-col5'
            placeholder='输入话题编号'
          ></el-input>
        </el-form-item>
        <el-form-item prop='id'>
          <el-input
            v-model='dataQueryForm.title'
            clearable
            class='pc-input3-col5'
            placeholder='输入标题'
          ></el-input>
        </el-form-item>
        <el-form-item prop='id'>
          <el-input
            v-model='dataQueryForm.contactName'
            clearable
            class='pc-input3-col5'
            placeholder='输入作者'
          ></el-input>
        </el-form-item>
        <el-form-item prop='id'>
          <el-input
            v-model='dataQueryForm.lastOperator'
            clearable
            class='pc-input3-col5'
            placeholder='输入操作人'
          ></el-input>
        </el-form-item>

        <el-form-item v-show='isshowMore'>
          <el-date-picker
            class='block'
            v-model='dataQueryForm.lastEditTime'
            type='daterange'
            range-separator='-'
            start-placeholder='最后更新开始日期'
            end-placeholder='最后更新结束日期'
            value-format='yyyy-MM-dd HH:mm:ss'
            @change='getLastEditTime'
          ></el-date-picker>
        </el-form-item>

        <el-form-item v-show='isshowMore'>
          <el-date-picker
            class='block'
            v-model='dataQueryForm.updateTime '
            type='daterange'
            range-separator='-'
            start-placeholder='操作开始日期'
            end-placeholder='操作结束日期'
            value-format='yyyy-MM-dd HH:mm:ss'
            @change='getUpdateTime'
          ></el-date-picker>
        </el-form-item>
        <el-form-item label>
          <el-button type='primary' @click='queryDataFn'>搜索</el-button>
          <el-button type='primary' @click="refresh('dataQueryForm')">刷新</el-button>
          <el-button type='primary' @click='batchReduction()'>批量还原</el-button>
          <el-button type='primary' @click='showMore()'>{{showMoreText}}</el-button>
        </el-form-item>
      </div>
    </el-form>
    <egrid
      border
      class='page-list'
      column-type='selection'
      :data='tableData'
      :columns='columns'
      :columns-props='columnsProps'
      @selection-change='selectionChange'
    ></egrid>

    <div class='pc-pagination-panel'>
      <pc-pagination
        ref='pcPagination'
        :url='pageUrl.queryDataList'
        :queryData='dataQueryForm'
        @on-query='queryCallBackFn'
      ></pc-pagination>
    </div>
  </div>
</template>

<script type='text/ecmascript-6'>
import PcPagination from 'components/form/pagination';
import PcButton from 'components/form/button';
import PcDialog from 'components/dialog';
import { enums } from '../../../../utils/settings';
let that;

// 操作按钮
var Btn = {
  template: `<div style='display:flex; width: 100%;flex-wrap: wrap'>
        <el-button v-if='showReduction' type='danger' plain @click='unReduction(row)'>还原</el-button>
      </div>`,
  props: ['row'],
  computed: {
    // 是否显示还原按钮
    showReduction() {
      return this.row.deleteReasonType !== enums.IBS_COMMENT_DEL_REASON.YHSC;
    }
  },
  methods: {
    // 还原数据
    unReduction(val) {
      this.$emit('single-Reduction', val);
    }
  }
};
export default {
  data() {
    return {
      justDel: false,
      isshow: null,
      isshowMore: false,
      showMoreText: '更多',
      detailId: '',
      isCloseOper: false,
      dialogTitle: '',
      isShowDetailDialog: false,
      isShowCredentialDialog: false,
      dataQueryForm: {
        topicNo: null,
        title: null,
        contactName: null,
        lastOperator: null,
        lastEditTime: null,
        updateTime: null,
        startEditDate: null,
        endEditDate: null,
        startModifyDate: null,
        endModifyDate: null
      },
      tableData: [],
      columns: [
        {
          label: '话题编号',
          minWidth: 90,
          prop: 'topicNo'
        },
        {
          label: '标题',
          minWidth: 320,
          prop: 'title'
        },
        {
          label: '作者',
          minWidth: 100,
          prop: 'contactName'
        },
        {
          label: '最后更新时间',
          minWidth: 150,
          prop: 'lastEditTime'
        },
        {
          label: '点赞人数',
          minWidth: 90,
          prop: 'likeNum'
        },
        {
          label: '回复人数',
          minWidth: 90,
          prop: 'replyNum'
        },
        {
          label: '回复数量',
          minWidth: 90,
          prop: 'replyPersonNum'
        },
        {
          label: '操作人',
          minWidth: 100,
          prop: 'lastOperator'
        },
        {
          label: '操作时间',
          minWidth: 150,
          prop: 'updateTime'
        },
        {
          label: '原因',
          minWidth: 240,
          prop: 'deleteReasonTypeDesc'
        },
        {
          label: '操作',
          minWidth: 80,
          fixed: 'right',
          component: Btn, // 'el-button'
          listeners: {
            'single-Reduction'(data) {
              that.singleReduction(data);
            },
            'update-credential'(data, title, flag) {
              that.viewCredentialFn(data, title, flag);
            }
          },
          propsHandler: function({ row, col, column }) {
            return { row, col, column };
          }
        }
      ],
      selecetedRows: [],
      // columnsProps 用于定义所有 columns 公共的属性，
      // 这里属性可以参考这里： http://element.eleme.io/#/zh-CN/component/table#table-column-attributes
      columnsProps: {
        height: 40,
        minWidth: 140,
        showOverflowTooltip: true
      },
      // columnsHandler 可用于在现有的 columns 进行操作，对 columns 进行增删改，这里新增了操作列
      pageUrl: {
        queryDataList: '/ibs/web/bbs/queryTopicRecycleListWithPage'
      }
    };
  },
  components: {
    PcPagination,
    PcButton,
    PcDialog
  },
  created() {
    that = this;
  },
  methods: {
    getLastEditTime() {
      if (this.dataQueryForm.lastEditTime === null) {
        this.dataQueryForm.startEditDate = '';
        this.dataQueryForm.endEditDate = '';
      } else {
        this.dataQueryForm.startEditDate = this.dataQueryForm.lastEditTime[0];
        this.dataQueryForm.endEditDate = this.dataQueryForm.lastEditTime[1];
      }
    },
    getUpdateTime() {
      if (this.dataQueryForm.updateTime === null) {
        this.dataQueryForm.startModifyDate = '';
        this.dataQueryForm.endModifyDate = '';
      } else {
        this.dataQueryForm.startModifyDate = this.dataQueryForm.updateTime[0];
        this.dataQueryForm.endModifyDate = this.dataQueryForm.updateTime[1];
      }
    },
    // 表头样式
    getHeaderStyle({ row, column, rowIndex, columnIndex }) {
      if (rowIndex === 0) {
        return 'background: #f5f5f5; height: 50px';
      } else {
        return '';
      }
    },
    getRowClass({ row, column, rowIndex, columnIndex }) {
      if (rowIndex === 0) {
        return 'background:rgb(245, 245, 245);';
      } else {
        return '';
      }
    },
    viewDetailFn(scopeRow) {
      this.isShowDetailDialog = true;
    },
    viewCredentialFn(scopeRow, title, isCloseOper) {
      this.detailId = scopeRow.id;
      this.dialogTitle = title;
      this.isCloseOper = isCloseOper;
      this.isShowCredentialDialog = true;
    },
    showMore() {
      this.isshowMore = !this.isshowMore;
      if (this.isshowMore) {
        this.showMoreText = '收起';
      } else {
        this.showMoreText = '更多';
      }
    },
    afterUpdateCredential() {
      this.isShowCredentialDialog = false;
      this.$refs.pcPagination.queryListWithPageFn(false);
    },
    queryCallBackFn(res) {
      this.tableData = res.result.list;
    },
    queryDataFn() {
      this.$refs.pcPagination.queryListWithPageFn(true);
    },
    refresh(formName) {
      this.$refs[formName].resetFields();
      this.dataQueryForm.topicNo = null;
      this.dataQueryForm.title = null;
      this.dataQueryForm.contactName = null;
      this.dataQueryForm.lastOperator = null;
      this.dataQueryForm.lastEditTime = null;
      this.dataQueryForm.updateTime = null;
      this.dataQueryForm.startEditDate = null;
      this.dataQueryForm.endEditDate = null;
      this.dataQueryForm.startModifyDate = null;
      this.dataQueryForm.endModifyDate = null;
      this.queryDataFn();
    },
    // 单个还原数据
    singleReduction(val) {
      // 调用后端接口
      var oper = '还原';
      this.ajaxBox({
        title: '操作确认',
        message: '确定要执行' + oper + '操作吗？',
        type: 'POST',
        url: '/ibs/web/bbs/batchTopicManage',
        data: {
          actionType: '4',
          topicInfoList: [{ id: val.id, version: val.version }]
        },
        loading: true,
        success: res => {
          setTimeout(() => {
            this.$pcNProgress.done();
          }, 300);
          if (res.code === 200) {
            this.$refs.pcPagination.queryListWithPageFn(false);
          } else {
            this.errorTip(res.message);
          }
        }
      });
    },
    // 批量还原数据
    batchReduction() {
      // 检查被选择对象的个数
      if (this.selecetedRows.length === 0) {
        this.errorTip('请先选择操作对象！');
        return;
      }

      // 将被选择的对象加入到后端接口参数中
      var actionDtoList = [];
      this.selecetedRows.forEach(function(item) {
        if (item.deleteReasonType !== enums.IBS_COMMENT_DEL_REASON.YHSC) {
          actionDtoList.push({ id: item.id, version: item.version });
        } else {
          that.justDel = true;
        }
      });

      // 调用后端接口
      if (that.justDel) {
        this.ajaxBox({
          title: '操作确认',
          message: '被用户删除的话题，不可还原。其他话题将被批量还原，确定要执行该操作吗？',
          type: 'POST',
          url: '/ibs/web/bbs/batchTopicManage',
          data: { actionType: '4', topicInfoList: actionDtoList },
          loading: true,
          success: res => {
            setTimeout(() => {
              this.$pcNProgress.done();
            }, 300);
            if (res.code === 200) {
              this.$refs.pcPagination.queryListWithPageFn(false);
            } else {
              this.errorTip(res.message);
            }
          }
        });
        that.justDel = false;
      } else {
        this.ajaxBox({
          title: '操作确认',
          message: '确定要执行批量还原操作吗？',
          type: 'POST',
          url: '/ibs/web/bbs/batchTopicManage',
          data: { actionType: '4', topicInfoList: actionDtoList },
          loading: true,
          success: res => {
            setTimeout(() => {
              this.$pcNProgress.done();
            }, 300);
            if (res.code === 200) {
              this.$refs.pcPagination.queryListWithPageFn(false);
            } else {
              this.errorTip(res.message);
            }
          }
        });
      }
    },
    selectionChange(rows) {
      this.selecetedRows = rows;
    }
  }
};
</script>
<style>
.page-scan-mana .el-upload-list--picture-card .el-upload-list__item-thumbnail {
  width: 146px;
  height: 146px;
  display: block;
  position: relative;
}

.page-scan-mana
  .el-upload-list--picture-card
  .el-upload-list__item-thumbnail:before {
  content: '\E614';
  position: absolute;
  top: 18px;
  left: 40px;
  color: #b3b3b3;
  font-size: 60px;
  font-family: 'maliiconfont' !important;
}

.page-scan-mana
  .topClassEditInfo
  .el-upload-list--picture-card
  .el-upload-list__item
  .el-icon-close {
  display: none;
}

.page-scan-mana
  .topClassEditInfo
  .el-upload-list--picture-card
  .el-upload-list__item
  .el-icon-close-tip {
  display: none;
}

.page-list .demand-no {
  padding: 5px 0px !important;
}

.el-button--info.is-plain.shield {
  color: #ff2b2b !important;
  border-color: #ffd6d6 !important;
  background-color: #ffe9e9 !important;
}
</style>
